<template>
  <div>
    <div class="dialog-footer">
      <el-button type="primary" @click="saveOrUpdateSchedule">保 存</el-button>
      <!--      <el-button @click="closeDialog">取 消</el-button>-->
    </div>
  </div>
  <el-divider border-style="inset" class="divider-margin"></el-divider>
  <el-container>
    <el-header class="header">
      课程名称
      <div>{{ courseName }}</div>
    </el-header>
  </el-container>
  <el-divider border-style="dotted" class="divider-margin"></el-divider>
  <el-container>
    <el-header class="header">
      课程安排名称
      <el-input v-model="courseScheduleName" size="default" placeholder="填写课程安排名称"></el-input>
    </el-header>
  </el-container>
  <el-divider border-style="dotted" class="divider-margin" style="margin-bottom: 15px;"></el-divider>
  <el-container>
    <el-header class="header">
      安排开课时间
      <div class="block" style="display: flex; align-items: center">
        <el-date-picker
          v-model="chosenRangeTime"
          type="datetimerange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          range-separator="至"
          size="default"
          :editable="false"
          :disabled-date="disableDate"
          value-format="YYYY-MM-DD HH:mm:ss"
          @change="choseDateTime"
          unlink-panels
        ></el-date-picker>
      </div>
    </el-header>
  </el-container>
  <el-divider border-style="dotted" class="divider-margin" style="margin-top: 20px"></el-divider>
  <el-container v-show="showOther">
    <el-header class="header"> 安排教练 </el-header>
    <div><el-input v-model="coachName" size="default" readonly></el-input></div>
    <el-table
      ref="coachSingleTableRef"
      :data="coachTableData"
      highlight-current-row
      height="200"
      size="default"
      @current-change="handleCoachChange"
    >
      <el-table-column prop="realName" fixed width="150" label="姓名" align="center" />
      <el-table-column prop="gender" label="性别" align="center">
        <template #default="scope">
          {{scope.row.gender === 'F' ? '女' : '男'}}
        </template>
      </el-table-column>
      <el-table-column prop="age" label="年龄" walign="center" />
      <el-table-column prop="domain" label="专长" show-overflow-tooltip align="center" />
    </el-table>
  </el-container>
  <el-divider v-show="showOther" border-style="dashed" class="divider-margin"></el-divider>
  <el-container v-show="showOther">
    <el-header class="header"> 安排场地 </el-header>
    <div><el-input v-model="venueName" size="default" readonly></el-input></div>
    <el-table
      ref="venueSingleTableRef"
      :data="venueTableData"
      highlight-current-row
      height="200"
      size="default"
      @current-change="handleVenueChange"
    >
      <el-table-column prop="name" fixed label="场地名称" align="center" />
      <el-table-column prop="address" label="场地地址" show-overflow-tooltip align="center" />
    </el-table>
  </el-container>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getCourseForm } from '@/api/course/list'
import { ElMessage, ElTable } from 'element-plus'
import { tabsStore } from '@/stores/tabs.ts'
import {
  getCourseScheduleForm,
  queryAvailableCoach,
  queryAvailableVenue,
  saveCourseSchedule, updateCourseSchedule
} from '@/api/course/schedule'
import {Coach} from '@/api/coach/types.ts'
import {Venue} from '@/api/resource/venue/types.ts'
import {CourseSchedule} from '@/api/course/schedule/types.ts'
import {getCoachForm} from '@/api/coach'
import {getVenueForm} from '@/api/resource/venue'

const tab = tabsStore()

interface User {
  date: string
  name: string
  address: string
}
const currentRow = ref()

const route = useRoute()
const router = useRouter()

const showOther = ref(false)

const courseName = ref('')

const coachName = ref<string>('')
const venueName = ref<string>('')
const coachId = ref<number>()
const venueId = ref<number>()
const statusId = ref<number>(0)
const coachSingleTableRef = ref()
const venueSingleTableRef = ref()
const coachTableData = ref<Coach[]>([])

const venueTableData = ref<Venue[]>([])

const chosenRangeTime = ref<string[]>([])

const courseScheduleName = ref<string>('')

const handleCoachChange = (val: Coach) => {
  coachName.value = val.realName
  coachId.value = val.id
}

const handleVenueChange = (val: Venue) => {
  venueName.value = val.name
  venueId.value = val.id
}

const disableDate = (time: Date) => {
  return time.getTime() < new Date().setHours(0, 0, 0, 0) // 禁止选择今天之前的日期
}

const choseDateTime = (val: string[]) => {
  console.log(val[0])
  showOther.value = true
  chosenRangeTime.value[0] = val[0]
  chosenRangeTime.value[1] = val[1]
  queryAvailableCoach(val[0], val[1]).then((response) => {
    if (response.code == '00000') {
      coachTableData.value = response.data
    }
  })
  queryAvailableVenue(val[0], val[1]).then((response) => {
    if (response.code == '00000') {
      venueTableData.value = response.data
    }
  })
}

const saveOrUpdateSchedule = () => {
  if(chosenRangeTime.value.length == 0){
    ElMessage.error("没有安排时间")
    return false;
  }
  if(!coachId.value){
    ElMessage.error("没有安排教练")
    return false;
  }
  if(!venueId.value){
    ElMessage.error("没有安排场地")
    return false;
  }
  const courseSchedule = {
    name: courseScheduleName.value,
    courseId: history.state.cid,
    courseName: courseName.value,
    venueId: venueId.value,
    venueName: venueName.value,
    coachId: coachId.value,
    coachName: coachName.value,
    status: statusId.value,
    startTime: chosenRangeTime.value[0],
    endTime: chosenRangeTime.value[1]
  }
  saveCourseSchedule(courseSchedule).then(() => {
    ElMessage.success("操作成功");
  })
  tab.editableTabs.pop()
  router.push({name: 'schedule-list'})
}

onMounted(() => {
  getCourseForm(history.state.cid).then((resp) => {
    courseName.value = resp.data.name
  })
  /*getCourseScheduleForm(history.state.cid).then((resp) => {
    const data = resp.data;
    if(resp.code == '00000' && data) {
      console.log('getCourseScheduleForm==>',data)
      updateSchedule.value = true
      chosenRangeTime.value[0] = data.startTime
      chosenRangeTime.value[1] = data.endTime
      venueId.value = data.venueId
      coachId.value = data.coachId
      statusId.value = data.status
      courseScheduleId.value = data.id
      getCoachForm(coachId.value).then((resp) => {
        coachName.value = resp.data.realName
      })
      getVenueForm(venueId.value).then((resp) => {
        venueName.value = resp.data.name
      })
      choseDateTime(chosenRangeTime.value)
    }

  })*/
  console.log(history.state)
})
</script>
<style scoped>
.header {
  color: #2c3e50;
  font-weight: bold;
  height: 40px;
  margin-top: 0px;
}
.divider-margin {
  margin: 10px 0;
}
.footer {
  margin-top: 20px;
}
</style>
